<template>
  <div>
    {{ids}}
    <el-button type="primary" @click="zixun">在线咨询</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisibles">

      <ul>
        <li v-for="i,j in meslist" :key="j">{{i}}</li>
      </ul>

      <el-form :model="frommes"  class="demo-ruleForm">
      <el-form-item label="请输入咨询内容" prop="pass">
          <el-input type="type" v-model="frommes.put" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForms">发送</el-button>
      </el-form-item>
      </el-form>

    </el-dialog>








    <el-form :model="Formdata" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">

    <el-form-item label="描述" prop="purpose">
      <el-input v-model="Formdata.purpose" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="理由" prop="descrip">
      <el-input  v-model="Formdata.descrip" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>

  </el-form>

    <template>
      <el-table :data="list" style="width: 100%">
        
        <el-table-column prop="code" label="ID" width="180">
        </el-table-column>

        <el-table-column prop="purpose" label="描述" width="180">
        </el-table-column>

        <el-table-column prop="interest_rate" label="利率" width="180">
        </el-table-column>

        <el-table-column prop="audit_time" label="时间">
        </el-table-column>

        <el-table-column prop="money" label="金额">
        </el-table-column>

            <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.code,scope.row.interest_rate)" type="text" size="small">出借</el-button>
      </template>
    </el-table-column>

      </el-table>
    </template>
    <van-pagination
      v-model="currentPage"
      :total-items="total"
      :items-per-page="page_size"
      @change="getfenye"
    />
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="投资金额" prop="pass">
            <el-input type="type" v-model="ruleForm.money" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      meslist:[],
      dialogTableVisible:false,
      lists:"",
      frommes:{
        put:""
      },
      ws:null,
      username:"",
      ids:"",


      dialogTableVisibles:false,
      Formdata:{
        descrip:"",
        purpose:""
      },
      list: [],
      page_size: 10,
      currentPage: 1,
      total: "",
      codes:0,

      tate:0,
      user_id:localStorage.getItem('user_id'),
      ruleForm:{
        money:""
      },
      id:"",
    };
  },
  methods: {
    zixun(){
      this.dialogTableVisibles = true
      this.initWebsocket()
    },
    initWebsocket() {
      this.ids = this.$route.query.id
      this.username = '用户' +  this.ids
      this.ws = new WebSocket("ws://localhost:8000/webce/?id=" + this.ids + '&username=' + this.username);
      this.ws.onopen = function () {
        // alert("success")
      };
      this.ws.onmessage=(msg)=>{
        var mes = JSON.parse(msg.data);
        this.meslist.push(mes['mes'])
      };

      this.ws.onclose = function () {
        // alert("close")
      };
    },
    submitForms(){
      var mes = this.username + "说" + this.frommes.put
      this.meslist.push(mes)
      var sendmes = JSON.stringify({'id':'kefu','mes':mes})
      this.ws.send(sendmes)
    },
    





    submitForm(){
      this.axios.get('land_search/?page=' + this.currentPage + "&page_size=" + this.page_size + "&descrip=" + this.Formdata.descrip + '&purpose=' +  this.Formdata.purpose)
      .then(resp=>{
        console.log(resp)
        this.list = resp.data.data
      })
    },
    submit(){
      this.axios.post('/investment/',{'tate':this.tate,'code':this.codes,'user_id':this.user_id,'money':this.ruleForm.money}).then(resp=>{
        console.log(resp)
        alert(resp.data.msg)
      })
    },
    handleClick(code,interest_rate){
      this.codes = code
      this.tate = interest_rate
      this.dialogTableVisible = true

    },
    getfenye() {
      this.axios
        .get(
          "fenyeyou/?page=" + this.currentPage + "&page_size=" + this.page_size
        )
        .then((resp) => {
          console.log(resp);
          this.total = resp.data.total;
          this.list = resp.data.data;
        });
    },
  },
  mounted() {
    this.getfenye();
    
  },
};
</script>

<style>
</style>